import React, { useState, useEffect, useMemo } from 'react';
import { Table } from 'antd';
import { useVT } from 'virtualizedtableforantd4';

const BasicTable = ({
  dataSource,
  columns,
  scroll,
  rowKey,
  onExpand,
  bigTable,
  rowClassName,
  onChange,
  locale,
  expandedRowRender,
  loading,
  defaultExpandAllRows,
  defaultExpandedRowKeys,
  onExpandedRowsChange,
  showHeader,
  rowSelection,
  footer,
  onRow,
  pagination,
  expandedRowKeys,
}) => {
  const [vt] = useVT(
    () => ({
      scroll,
    }),
    [scroll?.y],
  );

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowClassName={rowClassName}
      components={bigTable ? vt : {}} // id一定是number类型，若有多个table用到了这个插件，记得id要不一样，不然会有问题。
      scroll={scroll} // 必须设置滚动高度 这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
      onChange={onChange}
      locale={locale}
      rowKey={rowKey}
      onExpand={onExpand}
      expandedRowRender={expandedRowRender}
      loading={loading}
      expandedRowKeys={expandedRowKeys}
      defaultExpandAllRows={defaultExpandAllRows}
      defaultExpandedRowKeys={defaultExpandedRowKeys}
      onExpandedRowsChange={onExpandedRowsChange}
      showHeader={showHeader}
      onRow={onRow}
      rowSelection={rowSelection}
      footer={footer}
      pagination={pagination}
    />
  );
};

export default BasicTable;
